<template>
  <div ref="barDom" style="height: 240px; width: auto"></div>
</template>
<style scoped></style>
<script>
import { getPie } from "../api/mainApi";
const option = {
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [],
      itemStyle: {
        normal: {
          color: "#fac858",
        },
      },
      type: "bar",
      barWidth: 30,
    },
  ],
};

export default {
  name: "BarChart",
  mounted() {
    this.getData();
    this.mychart = this.$echarts.init(this.$refs.barDom);
    this.mychart.setOption(option);
  },
  computed: {
    myChart() {
      return this.$echarts.init(this.$refs.barDom);
    },
  },
  methods: {
    getData() {
      getPie((res) => {
        let arr = [];
        res.forEach((item) => {
          arr.push({
            name: item.term,
            value: item.num,
          });
        });
        option.series[0].data = arr;
        let list = Object.values(arr);
        let idsStr = list
          .map(function (obj, index) {
            return obj.name;
          })
          .join(",");
        let qs = idsStr.split(",");
        let idsStr1 = list
          .map(function (obj, index) {
            return obj.value;
          })
          .join(",");
        let qs1 = idsStr1.split(",");
        option.xAxis.data = qs;
        option.series[0].data = qs1;
        this.mychart.setOption(option);
      });
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style scoped>
.test {
  color: #ab1f2a;
}
</style>
